<template>
  <div class="manage">
    <div class="container">
      <router-link class="item" to="/manage/eventhandle">
        <img src="../../assets/icons/shijianchuli@2x.png" alt="">
        <p>事件处理</p>
      </router-link>
      <router-link class="item" :to="{path: '/manage/timewatch'}">
        <img src="../../assets/icons/shishijiankong@2x.png" alt="">
        <p>实时监控</p>
      </router-link>
      <router-link class="item" to="/manage/basicbuild">
        <img src="../../assets/icons/jichujianshe@2x.png" alt="">
        <p>基础建设</p>
      </router-link>
      <router-link  class="item" to="/manage/systemwatch">
        <img src="./../../assets/icons/系统监控@2x.png" alt="">
        <p>系统监控</p>
      </router-link>
      <router-link  class="item" to="/manage/commitbook" style="width: 100%">
        <img src="./../../assets/icons/通讯录@2x.png" alt="">
        <p>通讯录</p>
      </router-link>
    </div>
    <FooterGuide/>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
import FooterGuide from '../../components/FooterGuide/FooterGuide'
export default {
  name: 'Manage',
  data () {
    return {
      src: ''
    }
  },
  components: {
    FooterGuide
  }
}
</script>

<style scoped lang="less">
  .manage {
    .container {
      display: flex;
      flex-wrap: wrap;
      padding: 87px 15px 0;
      justify-content: space-between;
      .item {
        flex-wrap: wrap;
        width: 48%;
        height: 250px / 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 14px;

        img {
          width: 44px;
          height: 44px;
          margin-bottom: 15px;
        }

        &:nth-child(odd) {
          /*margin-right: 12px;*/
          margin-bottom: 12px;
        }

        &:nth-child(1) {
          background-color: #edeaf6;
          color: #5138a4;
        }

        &:nth-child(2) {
          background-color: #e8f9fb;
          color: #45c1d8;
        }

        &:nth-child(3) {
          background-color: #ffece5;
          color: #f66c2a;
        }

        &:nth-child(4) {
          background-color: #e9f6ff;
          color: #2e6ec0;
        }

        &:nth-child(5) {
          background-color: #fcf8ea;
          color: #ca960a;
        }

        &:nth-child(6) {
          background-color: #e5f0ff;
          color: #246fff;
        }
      }
    }
  }
</style>
